<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="inc :: header('住房租赁公共信息管理系统')" />
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!--头部start-->
    <div class="layui-header">
        <div class="layui-logo">
            <a href="#">
                <img src="img/logo.jpg" />
                <!--住房租赁公共信息管理系统-->
            </a>
        </div>

        <!--右侧个人信息-->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="#">
                    <img src="img/user.jpg" class="layui-nav-img"/>
                    山竹
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="#">基本信息</a></dd>
                    <dd><a href="#">密码修改</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="#">退出系统</a></li>
        </ul>
    </div>
    <!--头部end-->

    <!--左侧导航start-->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="#">基础数据</a>
                    <dl class="layui-nav-child">
                        <dd><a href="#" id="0" src="/mc/index" class="tab-active">小区管理</a></dd>
                        <dd><a href="#" id="1" src="/hc/index" class="tab-active">房源管理</a></dd>
                        <dd><a href="#" id="2" src="" class="tab-active">租方管理</a></dd>
                        <dd><a href="#" id="3" src="" class="tab-active">家庭管理</a></dd>
                        <dd><a href="#" id="4" src="" class="tab-active">建筑方管理</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item layui-nav-itemed">
                    <a href="#">摇号配租</a>
                    <dl class="layui-nav-child">
                        <dd><a href="#">房源导出</a></dd>
                        <dd><a href="#">租户导出</a></dd>
                        <dd><a href="#">配租导出</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!--左侧导航end-->

    <!--中间部分start-->
    <div class="layui-body">
        <div>
            <div class="layui-tab" lay-allowclose="true" lay-filter="tab01">
                <ul class="layui-tab-title">
                    <li class="layui-this">欢迎界面</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">欢迎内容</div>
                </div>
            </div>
        </div>
    </div>
    <!--中间部分end-->

    <!--底部部分start-->
    <div class="layui-footer">
        &copy;entor.com 底部版权声明
    </div>
    <!--底部部分end-->
</div>

<script th:inline="javascript">
    $(function(){

    });
    layui.use('element',function(){
        var element = layui.element;

        //触发tab的事件
        var active = {
            add:function(html,id,src){
                //需要用到element
                element.tabAdd('tab01',{
                    title:html,
                    content:'<iframe src="'+src+'" scrolling="auto" frameborder="no" style="width: 100%;min-height: 400px;"></iframe>',
                    id:id
                });
                FrameWH()
            },
            change:function(id){
                //切换到打开tab
                element.tabChange('tab01',id);
            }

        };
        //监听左侧菜单点击事件
        $('.tab-active').click(function(){
            var html = $(this).html();
            var id = $(this).attr('id');
            var lis = $('.layui-tab-title li[lay-id]');
            var src = $(this).attr('src');
            if(lis.length<=0){
                active.add(html,id,src);
            }else{
                var flat = false;
                $.each(lis,function(){
                    var id2 = $(this).attr('lay-id');
                    if(id==id2){
                        flat = true;
                    }
                });
                if(!flat){
                    active.add(html,id);
                }
            }
            active.change(id);
        });
        function FrameWH() {
            var h = $(window).height()-170;
            $("iframe").css("height",h+"px");
        }

    });
</script>
</body>
</html>
